<template>
  <el-drawer v-model="dialogVisible" size="400px" title="离职办理" @close="cancel">
    <el-form ref="ruleFormRef" :rules="rules" :model="formData" label-width="auto">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="离职人员:">
            {{ row.name }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="入职时间:">
            {{ row.joinedDate }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item class="form-itme-width_50" label="直属上级" id="bdUserId" prop="leaderId">
            <dc-select-user
              v-model="formData.leaderId"
              placeholder="请选择"
              :multiple="false"
              :multiple-limit="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="row.isAccommodation === '是'">
          <el-form-item label="是否退宿" prop="isCheckOut">
            <el-select v-model="formData.isCheckOut" placeholder="请选择是否退宿" clearable>
              <el-option
                v-for="(item, index) in isCheckinList"
                :key="index"
                :value="item"
                :label="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="离职说明" prop="leavingRemark">
            <el-input
              type="textarea"
              v-model="formData.leavingRemark"
              placeholder="请输入离职说明"
              :rows="5"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        <el-button @click="cancel(ruleFormRef)">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup>
import { laborRegisterUpdate, leaving } from '@/api/system/labor';

const { proxy } = getCurrentInstance();
const data = reactive({
  row: {},
  loading: true,
  rules: {
    isAccommodation: [{ required: true, message: '是否入住为必选项', trigger: 'change' }],
    joinedDate: [{ required: true, message: '入职时间为必选项', trigger: 'change' }],
    leaderId: [{ required: true, message: '直属上级为必选项', trigger: 'change' }],
  },
  dialogVisible: false,
  formData: {},
  ids: [],
  isCheckinList: ['是', '否'],
});
const { rules, dialogVisible, formData, isCheckinList, row } = toRefs(data);
const ruleFormRef = ref(null);

const emit = defineEmits(['success']);

// 打开添加弹窗
const openDialog = async row => {
  proxy.resetForm('ruleFormRef');
  dialogVisible.value = true;
  data.row = row || {};
  formData.value.leaderId = row.leaderId;
  console.log(row);
  if (row.isAccommodation == '是') {
    data.rules['isCheckOut'] = [{ required: true, message: '是否退宿为必选项', trigger: 'change' }];
  }
};

// 弹出框提交表单
const submitForm = async formEl => {
  formEl.validate(async valid => {
    if (valid) {
      let newrow = Object.assign(data.row, formData.value);
      if (Array.isArray(newrow.laborFileId) && newrow.laborFileId.length > 0) {
        let laborFileIdsList = newrow.laborFileId.map(item => {
          return item.id;
        });
        newrow.laborFileId = laborFileIdsList.join(',');
      }
      const res = await laborRegisterUpdate(newrow);
      const { code, msg } = res.data;
      if (code === 200) {
        const chageStatus = await leaving([newrow.id]);
        if (chageStatus) {
          cancel();
          emit('success');
          proxy.$message.success(msg);
        }
      }
    }
  });
};

// 取消
const cancel = () => {
  dialogVisible.value = false;
  formData.value = {};
};

defineExpose({
  openDialog,
});
</script>
